<template>
  <div class="background">
    <div class="login">
      <h1>登录</h1>
      <div class="inputBox">
        <el-input v-model="username" placeholder="请输入账号"></el-input>
        <span></span>
      </div>
      <div class="inputBox">
        <el-input v-model="password" placeholder="请输入密码"></el-input>
        <span></span>
      </div>
      <div>
        <el-radio v-model="position" label="门店管理员">店铺管理员</el-radio>
        <el-radio v-model="position" label="平台管理员">后台管理员</el-radio>
      </div>
      <div>
        <el-button class="btn" @click="login1">登录</el-button>
      </div>
      <div style="font-size:13px; width:200px">
        <span>没有账号？</span>
        <a href="#/register" style="color:rgb(214, 40, 40)">前往注册</a>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("login");

export default {
  methods: {
    ...mapActions(["login"]),
    login1() {
    
      
      this.login({
        username: this.username,
        password: this.password,
        position: this.position
      });
    }
  },

  data() {
    return {
      username: "",
      password: "",
      position: ""
    };
  }
};
</script>

<style>
.background {
  height: 100vh;
  background-image: url("../assets/f4b77733385c4dab19c6a002f5670470.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100vh;
   display: flex;
    justify-content: center;
  align-items: center;
}
.login {
  margin: auto 0 auto 700px;
  width: 400px;
  height: 500px;
  border: 1px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 15px;
}
.inputBox {
  width: 300px;
}
.inputBox input {
  width: 300px;
  margin: 10px 0;
  background-color: rgba(238, 231, 231, 0);
  color: black;
}
.inputBox input::-webkit-input-placeholder {
  color: rgb(214, 40, 40);
}

.btn {
  background-color: rgb(112, 112, 111);
  margin: 10px 0;
  width: 300px;
  font-size: 20px;
  color: black;
  border: none;
}
.btn:hover {
  background-color: rgb(44, 49, 49);
  color: wheat;
}
h1{
   color:rgb(112, 112, 111)
}
</style>